<template>
  <section class="xm-content xm-banner">
    <el-form
      ref="form"
      v-loading="box_loading"
      :model="form"
      :rules="rules"
      label-width="100px"
      inline-message
    >
      <!-- <el-form-item label="套餐名称" prop="package_name">
            <el-input v-model="form.package_name" clearable placeholder="请输入套餐名称" />
        </el-form-item> -->

      <!-- 动态表单 -->
      <div>
        <c-title txt="百分比颜色配置：" style="margin-top: 20px;">
          <b @click="addContent">添加百分比颜色配置</b>
        </c-title>
        <div>
          <section
            class="item-box"
            v-for="(item, index) in form.list"
            :key="'mou' + index"
          >
            <i class="el-icon-error" @click="deleteContent(index)" />

            <el-form-item
              :label="'开始百分比-' + (index + 1)"
              :prop="'list.' + index + '.startPercent'"
              :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
            >
              <el-input
                v-model="item.startPercent"
                clearable
                placeholder="请填写开始百分比 单位%"
              />
            </el-form-item>
            <el-form-item
              :label="'结束百分比-' + (index + 1)"
              :prop="'list.' + index + '.endPercent'"
              :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
            >
              <el-input
                v-model="item.endPercent"
                clearable
                placeholder="请填写	结束百分比 单位%"
              />
            </el-form-item>
            <!-- <el-form-item :label="'价格-'+(index+1)+'(元)'"
                    :prop="index + '.color'"
                    :rules="[{ required: true, message: '必填', trigger: 'blur' }]">
                    <el-input v-model="item.color" clearable placeholder="请填写价格(元)" />
                </el-form-item> -->

            <el-form-item
              :label="'选择颜色-' + (index + 1)"
              :prop="'list.' + index + '.color'"
              :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
            >
              <div style="display: flex">
                <el-input
                  v-model="item.color"
                  clearable
                  class="marginRight20"
                />
                <el-color-picker v-model="item.color"></el-color-picker>
              </div>
            </el-form-item>
          </section>
        </div>
      </div>
    </el-form>
    <div class="xm-footer">
      <el-button
        type="primary"
        size="mini"
        :loading="btn_loading"
        @click="saves('form')"
        >确 定</el-button
      >
      <el-button type="info" size="mini" @click="close">关 闭</el-button>
    </div>
  </section>
</template>

<script>
import { getPercent, addOrEditPercent } from '@/api/xapi'
export default {
  components: {
    CTitle: () => import('@/components/CTitle/index2'),
  },
  props: {
    layerid: {
      default: 0,
    },
    row: {
      default: {},
    },
  },
  data() {
    return {
      box_loading: false,
      btn_loading: false,
      form: {
        productStatisticsId: '',
        list: [],
      },
      rules: {},
    }
  },
  created() {
    if (this.row.id) {
      this.getPercent(this.row.id)
    }
  },
  methods: {
    async getPercent(id) {
      const { data } = await getPercent(id)

      this.form.list = data
      if (data) this.form.productStatisticsId = data[0]['productStatisticsId']
    },
    /* 添加、编辑 */
    saves(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          var obj = JSON.parse(JSON.stringify(this.form))
          this.btn_loading = true
          const res = await addOrEditPercent(obj)
          this.btn_loading = false

          if (res.code == '') return false
          Object.assign(this.$data.form, this.$options.data().form)
          this.$layer.close(this.layerid)
          this.$parent.getList()
          this.$message({ message: '操作成功', type: 'success' })
        } else {
          this.$refs[formName].validate()
        }
      })
    },
    addContent() {
      this.form.list.push({
        startPercent: '',
        endPercent: '',
        color: '',
      })
    },
    deleteContent(index) {
      if (this.form.list.length === 1) {
        this.$message({ message: '至少一项', type: 'success' })
        return false
      }
      const j = this.form.list.findIndex((item, ind) => ind === index)
      this.form.list.splice(j, 1)
    },
    close() {
      this.$layer.close(this.layerid)
    },
  },
}
</script>

<style lang="scss" scoped>
.item-box {
  position: relative;
  padding: 20px 10px 10px;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 0 5px 19px 0 rgba(84, 84, 84, 0.16);
  i.el-icon-error {
    position: absolute;
    top: -15px;
    right: -10px;
    font-size: 22px;
    color: #fe7676;
    cursor: pointer;
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease;
  }
  &:hover i.el-icon-error {
    top: -10px;
    right: -10px;
    z-index: 1;
    opacity: 1;
  }
  .obj-box {
    padding: 12px 0;
    &:nth-of-type(n + 3) {
      border-top: 1px solid #eee;
    }
  }
}
</style>
